/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, TouchableOpacity, Animated, FlatList,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数
import * as orderListAction from "../actions/orderListAction"; // 导入action方法
import {
  Color, ScreenWidth, FontSize, scale, RefreshState,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import BasePage from "../widget/common/BasePage";
import Button from "../widget/common/NCButton";
import EmptyView from "../widget/common/EmptyView";
import EnumConstants from "../common/EnumConstants";
import FooterComponent from "../widget/common/FooterComponent";
import { fDateShow } from "../utils/utils";

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);

const {
  OrderType, OrderStatus, OrderStatusTexts, RecycleTypeFullTexts,
} = EnumConstants;

let type;

class OrderList extends Component {
  constructor(props) {
    super(props);
    type = NavigatorUtil.getPageParam(props, "type");
  }

  componentWillMount() {
    const { props } = this;
    props.dispatch(orderListAction.getOrderList(type));
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(orderListAction.unmount());
  }

  renderItemView = ({ item, index }) => {
    const {
      order_no, order_status, facility_name, order_time,
    } = item;
    let timeShow;
    let keyName;
    let keyValue;
    let priceShow;
    let priceKeyName;
    let orderId;
    switch (type) {
      case OrderType.RECYCLE:
        timeShow = fDateShow(item.recycle_time);
        keyName = "回收方式";
        keyValue = RecycleTypeFullTexts[item.recycle_type];
        priceShow = item.count_expense;
        priceKeyName = "回收价格";
        orderId = item.recycle_order_id;
        break;
      case OrderType.UPDATE:
        timeShow = fDateShow(item.upgrade_time);
        keyName = "升级方案";
        keyValue = item.upgrade_way;
        priceShow = item.count_expense;
        priceKeyName = "升级价格";
        orderId = item.upgrade_order_id;
        break;
      case OrderType.SERVICE:
        timeShow = fDateShow(item.service_time);
        keyName = "维修方案";
        keyValue = item.service_way;
        priceShow = item.count_expense;
        priceKeyName = "维修价格";
        orderId = item.service_order_id;
        break;
      default:
        break;
    }
    return (
      <TouchableOpacity onPress={() => NavigatorUtil.goOrderInfo(orderId, type)} activeOpacity={0.8}>
        <View style={styles.itemContainer}>
          <View style={styles.itemHeaderContainer}>
            <Text style={styles.textOrderNo}>{`订单编号${order_no}`}</Text>
            <Text style={styles.textStatus}>{OrderStatusTexts[order_status]}</Text>
          </View>
          <View style={styles.divider} />
          <View style={styles.itemContentContainer}>
            <Text style={styles.deviceName}>{facility_name}</Text>
            <View style={styles.row}>
              <Text style={styles.textName}>{keyName}</Text>
              <Text style={styles.textValue}>{keyValue}</Text>
            </View>
            <View style={styles.row}>
              <Text style={styles.textName}>下单时间</Text>
              <Text style={styles.textValue}>{order_time}</Text>
            </View>
            <View style={styles.row}>
              <Text style={styles.textName}>预约时间</Text>
              <Text style={styles.textValue}>{timeShow}</Text>
            </View>
            <View style={styles.rowSpace}>
              <View style={styles.row}>
                <Text style={styles.textName}>{priceKeyName}</Text>
                <Text style={styles.textPrice}>{`￥${priceShow}`}</Text>
              </View>
              {order_status === OrderStatus.wait_pay && type !== OrderType.RECYCLE && (
                <Button buttonStyle={styles.btnContainer} textStyle={styles.btnText} title="支付" />
              )}
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  renderFooter = () => {
    const { props } = this;
    const { orderListReducer } = props;
    const { orderList } = orderListReducer;
    if (orderList.length > 0) {
      return <FooterComponent footerState={RefreshState.NoMoreData} />;
    }
    return null;
  };

  render() {
    const { props } = this;
    const { orderListReducer } = props;
    const { orderList, loading, initing } = orderListReducer;
    const emptyView = <EmptyView desc="暂无订单" />;
    return (
      <BasePage style={styles.container} showLoading={loading} showIniting={initing}>
        <AnimatedFlatList
          data={orderList}
          style={styles.container}
          renderItem={this.renderItemView}
          ListFooterComponent={this.renderFooter}
          ListEmptyComponent={emptyView}
          // onRefresh={() => this.startRefresh()}
          keyExtractor={(_, i) => String(i)}
          // refreshing={headerState === RefreshState.Refreshing}
        />
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.white,
  },
  itemContainer: {
    height: scale * 193,
    width: ScreenWidth - scale * 32,
    marginLeft: scale * 16,
    marginTop: scale * 24,
    elevation: 2,
    shadowOffset: { height: 1 },
    shadowColor: Color.black,
    shadowOpacity: 0.1,
    paddingHorizontal: scale * 16,
    backgroundColor: Color.white,
  },
  itemHeaderContainer: {
    height: scale * 44,
    width: ScreenWidth - scale * 64,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  textOrderNo: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_desc,
  },
  textStatus: {
    fontSize: FontSize.SIZE_14,
    color: Color.tab_yellow,
  },
  textName: {
    fontSize: FontSize.SIZE_12,
    color: Color.text_assist,
    marginRight: scale * 8,
  },
  textValue: {
    fontSize: FontSize.SIZE_12,
    color: Color.text_desc,
  },
  deviceName: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_title,
    fontWeight: "bold",
    marginTop: scale * 16,
  },
  divider: {
    height: 1,
    width: ScreenWidth - scale * 64,
    backgroundColor: Color.divider_secondary,
  },
  itemContentContainer: {
    flex: 1,
  },
  row: {
    flexDirection: "row",
    marginTop: scale * 5,
    alignItems: "center",
  },
  rowSpace: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: scale * 14,
    height: scale * 30,
    width: "100%",
  },
  btnContainer: {
    width: scale * 60,
    height: scale * 30,
    borderRadius: scale * 5,
    backgroundColor: Color.tab_yellow,
    borderWidth: 0,
    borderColor: Color.text_desc,
  },
  btnText: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_title,
  },
  textPrice: {
    fontSize: FontSize.SIZE_1,
    color: Color.text_price,
  },
});

const reducers = state => {
  return {
    orderListReducer: state.orderListReducer,
  };
};

export default connect(reducers)(OrderList);
